<template>
	<view class="inivite2" v-if="onstatus">
		<view class="init-box">
			 <view class="code-box">
			 	
			 </view>
			
			 <text class="init-text" style="margin-top: 74rpx;">邀请码</text>
			 <view class="init-input">
			 	<text class="left">4543dsad</text>
			      <text class="right">复制</text>
			 </view>
			  <text class="init-text">邀请链接</text>
			  <view class="init-input">
			  	<text class="left">https://www.matestar.club/#/index...</text>
			       <text class="right">复制</text>
			  </view>
		</view>
	</view>
	<view class="inivite1"  v-else>
		<image src="@/static/imgs/my/initve-logo.png" mode="" class="init-logo"></image>
		<text class="init-text">只有购买产品的用户才可以邀请伙伴哦~</text>
		<view class="init-but">
			购买产品
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	const onstatus = ref(true)
</script>

<style scoped lang="scss">
	.inivite1{
		width: 100%;
		min-height: 100vh;
		background-color: #F2F4F7;
		display: flex;
		flex-direction: column;
		align-items: center;
		.init-logo{
			width: 530rpx;
			height: 310rpx;
			margin-top: 308rpx;
			margin-bottom: 52rpx;
		}
		.init-text{
			font-size: 28rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 24px;
			color: rgba(102, 102, 102, 1);
			margin-bottom: 128rpx;
		}
		.init-but{
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 22.4px;
			color: rgba(255, 255, 255, 1);
			width: 382rpx;
			height: 96rpx;
			opacity: 1;
			border-radius: 184rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(71, 111, 254, 1);
		}
	}
	.inivite2{
		width: 100%;
		min-height: 100vh;
		 background: url(@/static/imgs/my/init-bg.png) no-repeat;
		 background-size: cover;
		 position: relative;
		 .init-box{
			 position: absolute;
			 left: 50%;
			 top: 318rpx;
			 transform: translateX(-50%);
			 width: 668rpx;
			 // height: 1058rpx;
			 opacity: 1;
			 border-radius: 40rpx;
			 background:url(@/static/imgs/my/init-bg2.png) no-repeat;
			 background-size: cover;
			 display: flex;
			 flex-direction: column;
			 align-items: center;
			 padding-top: 272rpx;
			 .code-box{
				 width: 374rpx;
				 height: 374rpx;
				 background:url(@/static/imgs/my/codef.png) no-repeat;
				 background-size: cover;
				 display: flex;
				 align-items: center;
				 justify-content: center;
				
			 }
			 .init-text{
				 margin-bottom: 18rpx;
				 font-size: 32rpx;
				 font-weight: 500;
				 letter-spacing: 0px;
				 line-height: 21px;
				 color: rgba(0, 0, 0, 1);
			 }
			 .init-input{
				 margin-bottom: 50rpx;
				 min-width: 408rpx;
				 height: 76rpx;
				 opacity: 1;
				 border-radius: 12rpx;
				 padding: 18rpx 26rpx;
				 border: 1px solid rgba(217, 217, 217, 1);
				 display: flex;
				 justify-content: space-between;
				 align-items: center;
				 .left{
					
					 font-size: 12px;
					 font-weight: 500;
					 letter-spacing: 0px;
					 line-height: 21px;
					 color: rgba(0, 0, 0, 1);
				 }
				 .right{
					  margin-left: 48rpx;
					 font-size: 14px;
					 font-weight: 500;
					 letter-spacing: 0px;
					 line-height: 21px;
					 color: rgba(42, 130, 228, 1);
					 position: relative;
					 
				 }
				 .right::before{
					 content: '';
					 position: absolute;
					 width: 2rpx;
					 height: 24rpx;
					 background: rgba(217, 217, 217, 1);
					left: -24rpx; 
					top: 50%;
					transform: translateY(-50%);
				 }
			 }
		 }
	}
</style>